<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简单购物车</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="app">

</div>
</body>
</html>
<script type="text/babel">
let app=document.getElementById('app');
class Child1 extends  React.Component{
    constructor(props) {
        super(props);
        this.state={
            coom:[],
        }

    }
    render() {
        return <div>
            <div> <input className="input" placeholder="商品名"/> <input className="input" placeholder="价格"/> <button onClick={this.add.bind(this)}>添加</button></div>
            {this.state.coom.map((v,i)=>{
                return <p key={i}>商品名:{v.name} 价格:{v.price} <button onClick={this.delete1.bind(this,i)}>删除</button></p>
            })}
        </div>
    }
//函数
    add(){
        let input=document.getElementsByClassName('input');
        let Array=this.state.coom;
        Array.push({name:input[0].value,price:input[1].value})
this.setState({
    coom:Array
})
    };
    delete1(i){
        let Array=this.state.coom;
Array.splice(i,1)
        this.setState({
            coom:Array
        })
    }
}
ReactDOM.render(<Child1/>,app)
</script>
